<!DOCTYPE html>
<html>
<head>
    <title>我的数据</title>
<#include "/common/include_header.ftl">
    <script src="/static/js/echarts.js"></script>
</head>
<body>

<#include "/common/include_top.ftl">

<div class="layui-container fly-marginTop fly-user-main">

<#include "/common/include_menu.ftl">

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="fly-panel fly-panel-user" pad20>


        <div id="main" style="width: 600px;height:400px;"></div>


    </div>
</div>

<script>

    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {},
        series: [{
            name: '',
            type: 'line',
            areaStyle: {},
            data: []
        }]
    });

    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

    var names=[];    //类别数组（实际用来盛放X轴坐标值）
    var valueA=[];    //销量数组（实际用来盛放Y坐标值）
    var valueB=[];    //销量数组（实际用来盛放Y坐标值）
    var valueC=[];    //销量数组（实际用来盛放Y坐标值）
    var valueD=[];    //销量数组（实际用来盛放Y坐标值）
    var valueE=[];    //销量数组（实际用来盛放Y坐标值）

    var obj=[];
    var obj2=[];
    var maxValue = 0;

    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/json/data/${dataInfo.id}/info",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(rd) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (rd) {
                var result = rd.data;
                for(var i=0;i<result.length;i++){
                    names.push(result[i].name);    //挨个取出类别并填入类别数组
                }
            <#--if ("${dataInfo.valueA}" == "true") {-->
                for(var i=0;i<result.length;i++){
                    valueA.push(result[i].valueA);    //挨个取出销量并填入销量数组
                    if (result[i].valueA > maxValue){
                        maxValue = result[i].valueA;
                    }
                }

                for(var i=0;i<result.length;i++){
                    if (!hasNull(result[i].valueA, result[i].name)) {
                        obj.push({
                            value: parseFloat(result[i].valueA),
                            name: result[i].name
                        });    //挨个取出销量并填入销量数组
                    }
                }
                for(var i=0;i<result.length;i++){
                    if (!hasNull(result[i].valueA, result[i].name)) {
                        obj2.push({
                            name: result[i].name,
                            max: parseFloat(maxValue)
                        });    //挨个取出销量并填入销量数组
                    }
                }

//                }
            <#--if ("${dataInfo.valueB}) {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueB);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->
            <#--if (${dataInfo.valueC}) {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueC);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->
            <#--if ("${dataInfo.valueD}") {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueD);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->
            <#--if (${dataInfo.valueE}) {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueE);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->


                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    title: {
                        text: '${dataInfo.title}'
                    },
                    tooltip: {},
                    legend: {
                        data:['${dataInfo.valueAName}']
                    },
                    radar: {
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#fff',
                                backgroundColor: '#999',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        indicator:obj
//                                [
//                            { name: '销售（sales）', max: 6500},
//                            { name: '管理（Administration）', max: 16000},
//                            { name: '信息技术（Information Techology）', max: 30000},
//                            { name: '客服（Customer Support）', max: 38000},
//                            { name: '研发（Development）', max: 52000},
//                            { name: '市场（Marketing）', max: 25000}
//                        ]
                    },
                    series: [{
                        name: '${dataInfo.valueAName}',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data : [{
                                value : valueA,
                                name : ' '
                        }]
//                                [
//                            {
//                                value : [4300, 10000, 28000, 35000, 50000, 19000],
//                                name : '预算分配（Allocated Budget）'
//                            },
//                            {
//                                value : [5000, 14000, 28000, 31000, 42000, 21000],
//                                name : '实际开销（Actual Spending）'
//                            }
//                        ]
                    }]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })














</script>











<#include "/common/include_footer.ftl">
<#include "/common/include_js.ftl">
</body>
</html>